<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport'
        content='viewport-fit=cover,width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
    <title>ESP-AI 配网</title>
</head>

<body style='margin: 0;font-size: 16px; color: #333;height: 80vh;position: relative;font-family: 苹方,黑体;overflow: hidden;'> 
    <div style='height: 100%;display: flex;flex-direction: column; justify-content: center;align-items: center;'
        id='wifi_setting_panel'>
        <div style='padding-bottom: 18px;text-align: center;'>
            <img style='width:60px;'
                src='' />
            <div style='font-size: 22px;color: #757575;'>
                为 ESP-AI 设备配网
            </div>
        </div>

        <div style='width: 100%;padding: 8px 24px;box-sizing: border-box;'>
            <input id='ssid' name='ssid' type='text' placeholder='请输入WIFI账号，仅支持2.4GHZ频段WIFI'
                style='border-radius: 3px;font-size:14px;padding: 12px 12px;box-sizing: border-box;border: 1px solid #cfcfcf;outline: none;width:100%;'>
        </div>
        <div style='width: 100%;padding: 8px 24px;box-sizing: border-box;'>
            <input id='password' name='password' type='text' placeholder='请输入WIFI密码'
                style='border-radius: 3px;font-size:14px;padding: 12px 12px;box-sizing: border-box;border: 1px solid #cfcfcf;outline: none;width:100%;'>
        </div>
        <div style='width: 100%;padding: 8px 24px;box-sizing: border-box;'>
            <input id='api_key' name='api_key' type='text' placeholder='请输入产品密钥, 请到开发者平台获取'
                style='border-radius: 3px;font-size:14px;padding: 12px 12px;box-sizing: border-box;border: 1px solid #cfcfcf;outline: none;width:100%;'>
        </div>
        <div style='width: 100%;text-align: right; padding: 6px 24px; padding-bottom: 32px; box-sizing: border-box;'>
            <button id='submit-btn'  
                style='width:100% ; box-sizing: border-box; border-radius: 3px; padding: 16px 0px;border: none;color: #fff;background-color: transparent; color:#fff; background: linear-gradient(45deg, #40cea5, #09aba2); box-shadow: 0px 0px 3px #ccc;letter-spacing: 2px;'>连接WIFI</button>
        </div> 
        <div style='font-size: 13px;position: fixed;bottom: 12px;color:#929292'>
            设备编码：<span id='device_id'> - </span>
        </div> 
    </div>
</body>

</html>

<script>
    // var domain = 'http://192.168.4.1';
    var domain = ''; 

    var loading = false;
    function myFetch(apiName, params, cb) {
        fetch(domain + apiName, { mode: 'cors' })
            .then(function (res) { return res.json() })
            .then(function (data) { 
                cb && cb(data);
            })
    };

    function refreshInfo() {
        myFetch('/get_config', {}, function (res) {
            console.log('wifi信息：', res);
            if (res.success) { 
                var data = res.data;
                document.querySelector('#ssid').value = data.wifi_name;
                document.querySelector('#password').value = data.wifi_pwd;
                document.querySelector('#api_key').value = data.api_key; 
                document.querySelector('#device_id').innerHTML = data.device_id;  
            } else {
                alert('获取配置失败, 请刷新页面重试');
            }
        });
    };

    function setWifiInfo() {
        if (loading) {
            return;
        };
        var wifi_name = document.querySelector('#ssid').value;
        var wifi_pwd = document.querySelector('#password').value;
        var api_key = document.querySelector('#api_key').value; 
        if (!wifi_name) {
            alert('请输入 WIFI 账号哦~');
            return;
        }
        if (!wifi_pwd) {
            alert('请输入 WIFI 密码哦~');
            return;
        } 
        loading = true;
        document.querySelector('#submit-btn').innerHTML = '配网中...';
        clearTimeout(window.reloadTimer);
        window.reloadTimer = setTimeout(function(){
            alert('配网失败，即将重启设备，请刷新页面重新配网。');
            window.location.reload();
        }, 9000);
        myFetch(
            '/set_config?wifi_name=' + wifi_name + 
            '&wifi_pwd=' + wifi_pwd +
            '&api_key=' + api_key,
            {},
            function (res) {
                clearTimeout(window.reloadTimer);
                loading = false;
                document.querySelector('#submit-btn').innerHTML = '连接WIFI';
                if (res.success) {
                    alert('配网成功，即将重启设备，关闭本页面即可。'); 
                } else {
                    alert('配网失败，请检查账号密码是否正确');
                }
            }
        );
    };


    window.onload = function () {
        refreshInfo();
        document.querySelector('#submit-btn').addEventListener('click', setWifiInfo);
    }
</script> 
 